<script setup lang="ts">
import {IconClose} from "@arco-design/web-vue/es/icon";
import {onMounted, type Ref, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Swiper, SwiperSlide} from 'swiper/vue';

interface tabType {
  name: string
  title: string
}

const tabList: Ref<tabType[]> = ref([
  {name: "admin_home", title: "首页"},
])

const slidesPerView = ref(12)

onMounted(() => {
  // 总宽度
  let mySwiper = (document.querySelector(".mySwiper") as Element)
  let mySwiperWith = 1200
  if (mySwiper != null) {
    mySwiperWith = mySwiper.clientWidth
  }
  // 实际宽度
  let actual = (document.querySelector(".swiper-wrapper") as Element)
  let actualWidth = 1200
  if (mySwiper != null) {
    actualWidth = actual.scrollWidth
  }

  if (actualWidth <= mySwiperWith) {
    return
  }
  let swiperSlideList = document.querySelectorAll(".swiper-wrapper .swiper-slide")

  let sum = 0
  let count = 0

  for (const slide of swiperSlideList) {
    sum += slide.clientWidth
    if (sum > mySwiperWith) {
      break
    }
    count++
  }
  slidesPerView.value = count
})

const route = useRoute()
const router = useRouter()

function clickTab(item: tabType) {
  router.push({
    name: item.name,
  })
}

function inList(name: string) {
  for (let tabType of tabList.value) {
    if (tabType.name === name) {
      return true
    }
  }
  return false
}

function closeAll() {
  tabList.value = [
    {name: "admin_home", title: "首页"},
  ]
}

function closeTab(item: tabType) {
  // 点home不关闭
  if (item.name == "admin_home") {
    return
  }
  // 找到当前tab在列表里的索引
  let index = tabList.value.findIndex((tab: tabType) => tab.name === item.name)
  tabList.value.splice(index, 1)
  // 点的是当前页面的tab
  // 判断删除的这个name是不是和我当前的路由是一样的
  if (route.name === item.name) {
    let beforeIndex = index - 1 // 因为首页一定会有
    let beforeItem = tabList.value[beforeIndex]
    clickTab(beforeItem)
  }
}

watch(() => route.name, () => {
  if (!inList(route.name as string)) {
    // 当前路由不在list中,添加进去
    tabList.value.push({
      name: route.name as string,
      title: route.meta.title as string,
    })
  }
}, {immediate: true}) // 初始化的时候就加载进去
</script>

<template>
  <div class="blog_tabs">
    <swiper
        :slides-per-view="slidesPerView"
        class="mySwiper">
      <swiper-slide v-for="item in tabList" :key="item.name">
          <span :class="{blog_tab:true, active:route.name === item.name}"
                @click="clickTab(item)"
                @click.middle="closeTab(item)">
                {{ item.title }}
            <IconClose v-if="item.name !== 'admin_home'" @click.stop="closeTab(item)"></IconClose>
          </span>
      </swiper-slide>
    </swiper>
    <span
        @click="closeAll"
        class="blog_tab close_all_tab">
      全部关闭
    </span>
  </div>
</template>

<style lang="scss">
.blog_tabs {
  height: 30px;
  width: 100%;
  border-bottom: 1px solid var(--bg);
  padding: 0 20px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-bg-1);

  .mySwiper {
    width: calc(100% - 94px);
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;

    .swiper-wrapper {
      display: flex;
      justify-content: start;
      width: 100%;

      .swiper-slide {
        width: auto !important;
      }
    }
  }

  .blog_tab {
    border-radius: 5px;
    border: 1px solid var(--bg);
    padding: 2px 8px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;

    &.active {
      background-color: var(--active);
      color: white;
      border: none;

      svg:hover {
        background-color: rgb(var(--arcoblue-4));
      }

    }

    svg {
      font-size: 12px;
      border-radius: 50%;

      &:hover {
        background-color: var(--bg);
      }
    }
  }

  .close_all_tab {
    position: absolute;
    right: 20px;
    margin-right: 0;
  }
}
</style>
